<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import myTextarea from './myTextarea.vue';
import { ref, watch, onMounted } from 'vue';


const props = defineProps({
    modelValue: {
        type: Object,
        default: () => { }
    }
})

const emit = defineEmits(['update:modelValue']);


// 视频比例列表
const videoSizeList = ref([
    { id: 1, label: '自适应', value: 'adaptive', icon: 'ai-icon-a-1_1' },
    { id: 2, label: '1:1', value: '1:1', icon: 'ai-icon-a-1_1' },
    { id: 3, label: '3:4', value: '3:4', icon: 'ai-icon-a-3_4' },
    { id: 4, label: '4:3', value: '4:3', icon: 'ai-icon-a-4_31' },
    { id: 5, label: '16:9', value: '16:9', icon: 'ai-icon-a-16_9' },
    { id: 6, label: '9:16', value: '9:16', icon: 'ai-icon-a-9_16' },
    { id: 7, label: '21:9', value: '21:9', icon: 'ai-icon-a-16_9' },
    { id: 8, label: '9:21', value: '9:21', icon: 'ai-icon-a-9_16' },
])

const queryParams = ref({
    model: 'dbsdtv', // 模型
    prompt: '', // 文字
    resolution: '480p', // 生成模式
    duration: 5, // 生成时长
    ratio: videoSizeList.value[0].value // 视频比例
})

const placeholder = `示例：美丽的女人在车里，风景在背景中移动。女人转脸看向镜头，满脸兴奋。镜头切换，一个男人正在开车，同样面带笑容。（主体+加动作+运镜）`

// 创作历史文案名称
const historyName = ref('aiVideoHistory')
// 创作历史列表
const selectList = ref([])


watch(() => queryParams.value, (newVal) => {
    emit('update:modelValue', { ...newVal });
}, { deep: true, immediate: true });



// 视频比例点击事件
function videoSizeClick(item) {
    queryParams.value.ratio = item.value
}


// 点击历史选中项
function clickSelectItem(item) {
    queryParams.value.prompt = item.text
}


// 清除选中项
function clearSelectItem(item) {
    selectList.value = selectList.value.filter(i => i.text !== item.text)
    uni.setStorageSync(historyName.value, selectList.value)
}


// 获取存储文案历史记录
function getHistoryContent() {
    selectList.value = uni.getStorageSync(historyName.value) || []
}


// 存储文案历史记录
function setHistoryContent() {
    const existingIndex = selectList.value.findIndex(i => i.text === queryParams.value.prompt);
    if (existingIndex !== -1) {
        selectList.value.splice(existingIndex, 1);
    }
    selectList.value.unshift({
        text: queryParams.value.prompt,
        time: new Date().getTime()
    })
    uni.setStorageSync(historyName.value, selectList.value)
}



// 校验并获取参数方法，返回Promise
function getQueryParams() {
    return new Promise((resolve, reject) => {
        const { prompt } = queryParams.value;
        if (!prompt || !prompt.trim()) {
            Toast.fail('请输入创意描述');
            reject(new Error('请输入创意描述'));
            return;
        }
        resolve({ ...queryParams.value });
    });
}

onMounted(() => {
    getHistoryContent()
})

defineExpose({ getQueryParams, setHistoryContent });
</script>

<template>
    <div class='textCreateVideo'>
        <div class="textarea_box">
            <myTextarea v-model="queryParams.prompt" :selectList="selectList" @clearSelectItem="clearSelectItem"
                @clickSelectItem="clickSelectItem" keyName="text" label="创意描述" :placeholder="placeholder"
                :overlayStyle="{ background: 'transparent' }">
            </myTextarea>
        </div>
        <div class="title_box">参数设置</div>
        <div class="label">生成模式</div>
        <div class="mode_box">
            <div class="mode_item" :class="{ active: queryParams.resolution === '480p' }"
                @click="queryParams.resolution = '480p'">
                标准</div>
            <div class="mode_item" :class="{ active: queryParams.resolution === '720p' }"
                @click="queryParams.resolution = '720p'">高品质</div>
        </div>

        <div class="label">生成时长</div>
        <div class="mode_box">
            <div class="mode_item" :class="{ active: queryParams.duration === 5 }" @click="queryParams.duration = 5">5s
            </div>
            <div class="mode_item" :class="{ active: queryParams.duration === 10 }" @click="queryParams.duration = 10">10s
            </div>
        </div>

        <div class="label">视频比例</div>
        <div class="videoSize">
            <div class="videoSize_item" :class="{ active: item.value === queryParams.ratio }" v-for="item of videoSizeList"
                @click="videoSizeClick(item)">
                <i :class="`iconfont ${item.icon}`"></i>
                <div class="text">{{ item.label }}</div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.textCreateVideo {

    .textarea_box {
        margin-top: 31rpx;
    }

    .title_box {
        font-size: 28rpx;
        color: var(--a-one-text-color);
        font-weight: bold;
        position: relative;
        padding-left: 30rpx;
        margin-top: 40rpx;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            width: 12rpx;
            height: 18rpx;
            background: var(--a-main-color);
            border-radius: 6rpx;
        }
    }

    .label {
        font-size: 24rpx;
        color: var(--a-two-text-color);
        margin: 20rpx 0 15rpx;
    }

    .mode_box {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .mode_item {
            box-sizing: border-box;
            width: 218rpx;
            height: 64rpx;
            background: var(--a-main-box-bg-color);
            border-radius: 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            color: var(--a-one-text-color);

            &.active {
                color: var(--a-main-color);
                border: 3rpx solid var(--a-main-color);
            }
        }
    }

    .videoSize {
        display: flex;
        align-items: center;
        gap: 18rpx;
        overflow: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        .videoSize_item {
            flex-shrink: 0;
            box-sizing: border-box;
            width: 124rpx;
            height: 124rpx;
            border-radius: 12rpx;
            color: var(--a-one-text-color);
            background: var(--a-main-box-bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8rpx;
            margin-top: 8rpx;

            &.active {
                color: var(--a-main-color);
                border: 3rpx solid var(--a-main-color);
            }

            .iconfont {
                font-size: 42rpx;
            }

            .text {
                font-size: 26rpx;
            }
        }
    }
}
</style>